<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>搜索输入框 Search inputs--JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script src="../../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<script type="text/javascript">
$(function(){
	    $("ul.tab a").click(function() {
        var i = $("ul.tab a").index(this);
        $(this).parent().find("a").removeClass("current");
        $(this).addClass("current");
        $(".subtab").hide().eq(i).show();
        return false;
		});
	});
</script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/form/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
				<h1>搜索输入框 Search inputs</h1>
                <ul class="tab">
                    <a href="#" class="current">综述</a>
                    <a href="#">选项</a>
                    <a href="#">方法</a>
                    <a href="#">事件</a>
                </ul><br>
    <div class="subtab">
				<div class="desc">
                <div>搜索输入框是一个新兴的html元素，外观为圆角，当你输入文字后右边会出现一个叉的图标，点击则会清除你输入的内容。给input增加type="search" 属性,可以实现一个搜索输入框 。 </div>
                <div>注意要把<strong>label</strong>的<strong>for</strong>属性设为input的<strong>id</strong>值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性</div> 
</div>
                
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>&lt;label for=&quot;search-basic&quot;&gt;Search Input:&lt;/label&gt;<br>&lt;input type=&quot;search&quot; name=&quot;search&quot; id=&quot;searc-basic&quot; value=&quot;&quot; /&gt;</pre>
</div>
				<div class="desc">
                <div>这样就会生成一个基本的搜索输入框。默认的宽度为父容器的100。</div>
</div>

 	<p class="indent"><strong>搜索输入框 Search inputs</strong></p>
  <img src="../../images/form element/serach.png" tppabs="http://www.jqmapi.com/images/form%20element/serach.png">
<h1>迷你版本 Mini version</h1>
<div class="desc">
<div>给搜索输入框添加 <strong>data-mini="true"</strong>的属性，可以使搜索输入框成为一个迷你的版本。</div>
</div>
 	<p class="indent"><strong>搜索输入框-迷你版本 Mini version</strong></p>
  <img src="../../images/form element/serach.png" tppabs="http://www.jqmapi.com/images/form%20element/serach.png">
<hr /> 
<h1>Field容器  Field containers</h1>
<div class="desc">
<div>将搜索输入框放置到<strong>data-role="fieldcontain"</strong>属性的容器中，使之在视觉上成组。</div>
</div>
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre><strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;</strong><br>    &lt;label for=&quot;search-2&quot;&gt;Search Input:&lt;/label&gt;<br>    &lt;input type=&quot;search&quot; name=&quot;search-2&quot; id=&quot;search-2&quot; value=&quot;&quot; /&gt;<br><strong>&lt;/div&gt;</strong></pre>
</div>
<h1>搜索输入框的主题  Theming</h1>
<div class="desc">
<div>给搜索输入框添加<strong>data-theme </strong>属性可以设置搜索输入框的主题样式。</div>
</div>
 	<p class="indent"><strong>搜索输入框-不同的主题 Mini version</strong></p>
      <img src="../../images/form element/serach2.jpg" tppabs="http://www.jqmapi.com/images/form element/serach2.jpg">
<h1>   Setting the clear button text</h1>
<div class="desc">
<div>给搜索输入框添加<strong>data-theme </strong>属性可以设置搜索输入框的主题样式。</div>
</div>
<h1>调用textinput插件   Calling the textinput plugin</h1>
<div class="desc">
<div>jquery mobile框架会自动初始化把页面上有<strong>type="search"</strong>属性的输入框，都渲染成为jquqey mobile的搜索输入框，而不需要<strong>data-role</strong>属性。但是，如果需要的话，你可以调用textinput 方法把一个input 元素转为搜索输入框。</div>
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$('.mySearchInput').textinput();</pre>
                </div>
</div>
</div>
    <div class="subtab">
	  <div class="desc">
                <div>Search输入框拥有如下选项：</div>
	<h1 class="method"><div class="wg">initSelector</div>
  		<div class="info">css选择器</div>
	</h1>
</div>
				<div class="desc">
				<div><strong>默认: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"</strong></div>
                </div>
				<div class="desc">
				<div>这个选项用来定义被自动初始化为输入框的选择器（元素类型，数据规则等）。如果要改变被初始化的元素，可以给<strong>mobileinit</strong>事件绑定这个选项:</div>
                </div>
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br> <strong>  $.mobile.textinput.prototype.options.initSelector = &quot;.myInputs&quot;;</strong><br>});</pre>
</div>
	<h1 class="method"><div class="wg">mini</div>
  		<div class="info">布尔值</div>
</h1>
				<div class="desc">
				<div><strong>默认：false</strong></div>
                </div>
				<div class="desc">
				<div>让部件的外观更紧凑。也可以通过<strong>data-mini="true"</strong>的属性来设置。</div>
                </div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$('.selector').textinput({ mini: "true" });</pre>
</div>
	<h1 class="method"><div class="wg">theme</div>
  		<div class="info">字符串</div>
</h1>
				<div class="desc">
				<div><strong>默认null, 继承父容器</strong></div>
                </div>
				<div class="desc">
				<div>给这个组件的所有实例设定颜色主题。接受从a-z的一个字母来映射你的主题。默认情况下，它继承父容器的相同主题。这个选项也可以通过data-theme="a"的属性来配置</div>
                </div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$('.selector').textinput({ theme: &quot;a&quot; });
</pre>
</div>
	<h1 class="method"><div class="wg">clearSearchButtonText</div>
  		<div class="info">字符串</div>
</h1>
				<div class="desc">
				<div><strong>默认：clear text</strong></div>
                </div>
				<div class="desc">
				<div>设置清除serach输入框的按钮的按钮文字</div>
                </div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$('.selector').textinput(<strong>{ clearSearchButtonText: "custom value" }</strong>);</pre>
</div>
    </div>
<div class="subtab" style="display:none">
	  <div class="desc">
                <div>text输入框拥有如下方法：</div>
	<h1 class="method"><div class="wg">enable</div>
  		<div class="info">使一个输入框可用</div>
	</h1>
</div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$('.selector').textinput('enable');</pre>
</div>
	<h1 class="method"><div class="wg">disable</div>
  		<div class="info">使一个输入框不可用</div>
</h1>
	  <p class="indent"><strong>HTML 代码:</strong></p>
	  <div class="code">
				  <pre>$('.selector').textinput('disable');	</pre>
</div>
</div>
 <div class="subtab" style="display:none">
	  <div class="desc">
                <div>可以给input元素直接绑定事件，可以使用jQuery Mobile的虚拟事件，或者绑定JavaScript的标准事件，例如change, focus, blur等。</div>
</div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$( ".selector" ).bind( "change", function(event, ui) {
  ...
});</pre>
</div>
	<h1 class="method"><div class="wg">create</div>
  		<div class="info">当input 被创建时触发</div>
</h1>
	  <p class="indent"><strong>HTML 代码:</strong></p>
	  <div class="code">
				  <pre>$( ".selector" ).textinput({
  <strong> create: function(event, ui) { ... }</strong>
});	</pre>
</div>
</div> 
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



